import React from "react";
import { Link } from "react-router-dom";
import { Layout, Menu } from "antd";
import "../CSS/Header.less";

const { Header } = Layout;

function backToTop() {
    window.scrollTo({
        top: 0,
        behavior: "smooth",
    });
}

function BlogHeader() {
    return (
        <Header id="blogHeader">
            <Menu
                theme="dark"
                mode="horizontal"
            >
                <Menu.Item key="3">
                    <a href="/">首页</a>
                </Menu.Item>
                <Menu.Item key="1">
                    <Link to="/about">关于我</Link>
                </Menu.Item>
                <Menu.Item key="2">
                    <Link to="/other">其他</Link>
                </Menu.Item>
                <Menu.Item key="4" onClick={backToTop}>
                    <span>回到顶部</span>
                </Menu.Item>
            </Menu>
        </Header>
    );
}

export default BlogHeader;
